<template>
	<view class="template-message">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :bottomShadow="false" backTitle=" ">
			<view class="">
				<text class="tn-text-lg">关注客户</text>
				<text class="tn-text-xl"></text>
			</view>
		</tn-nav-bar>
		<view class="card" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view style="padding: 0 28rpx 28rpx;">
				<uni-easyinput  v-model="gjc" placeholder="请输入名片名称" @input="searchCircle" />
			</view>
			<fkEmpty v-if="resumeList.length == 0"></fkEmpty>
			<scroll-view scroll-y="true" v-else clas="card-swiper2" @scrolltolower="loadMore">
				<view class="list">
					<view class="item" v-for="(item,index) in resumeList" :key="index" @click="tn('/circlePages/businessCard?id='+item.mpiid)">
						<view class="swiper-item1 image-banner tn-shadow-blur"
							style="background-image:url(http://vote2.tmxxw.com/img/resume-bg.jpg);height: 100%;background-size: cover;border-radius: 15rpx;">
						</view>
						<view class="swiper-item2 image-banner tn-shadow-blur"
							:style="'background-image:url('+ item.tximg +');width: 120rpx;height: 120rpx;background-size: cover;'">
						</view>
						<view class="swiper-item-text tn-text-shadow-indigo">
							<view class="tn-text-bold tn-color-blue--dark" style="width: 75%; font-size: 45rpx;">{{item.qymc}}
							</view>
							<view class="tn-color-blue--dark tn-padding-top-sm">{{item.xm}}</view>
							<view class="tn-color-blue--dark tn-padding-top-sm">{{item.sjhm}}</view>
							<view class="tn-color-blue--dark tn-padding-top-sm">{{item.qydz}}</view>
							<view class="tn-flex tn-padding-top-xl" style="margin-left: -50rpx;">
								<view class="tn-flex-1 tn-padding-sm tn-margin-right">
									<view
										class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
										<view class="">
											<view class="tn-text-xxl tn-color-blue">{{item.renqi}}</view>
										</view>
										<view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
											<text class="tn-icon-fire"></text>
											<text class="tn-padding-left-xs">人气</text>
										</view>
									</view>
								</view>
								<view class="tn-flex-1 tn-padding-sm tn-margin-left tn-margin-right">
									<view
										class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
										<view class="">
											<view class="tn-text-xxl tn-color-orange">{{item.fenxiang}}</view>
										</view>
										<view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
											<text class="tn-icon-share-circle"></text>
											<text class="tn-padding-left-xs">分享</text>
										</view>
									</view>
								</view>
								<view class="tn-flex-1 tn-padding-sm tn-margin-left">
									<view
										class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
										<view class="">
											<view class="tn-text-xxl tn-color-red">{{item.zan}}</view>
										</view>
										<view class="tn-margin-top-xs tn-color-grey tn-text-df tn-text-center">
											<text class="tn-icon-like"></text>
											<text class="tn-padding-left-xs">爱心</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Tools from '@/tools/config.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'card',
		mixins: [template_page_mixin],
		data() {
			return {
				resumeList: [],
				pages: 1,
				gjc:"",
			}
		},
		onLoad() {
			this.resumeList = []
			this.pages = 1
			this.initData()
		},
		methods: {
			searchCircle(){
				this.resumeList = []
				this.pages = 1
				this.initData()
			},
			tn(url){
				uni.navigateTo({
					url: url
				})
			},
			loadMore() {
				this.pages++
				this.initData()
			},
			initData() {
				let theopenid = uni.getStorageSync('openid')
				let theunionid = uni.getStorageSync('unionid')
				uni.request({
					url: Tools.host + '/wshly.ashx',
					method: 'POST',
					data: {
						'lx': 'mpxx_list',
						'openid': theopenid,
						'unionid': theunionid,
						'mplx': 4,
						'pageindex': this.pages,
						'pagesize': 20,
						'gjc': this.gjc
					},
					success: (res) => {
						//成功
						if (res.data.return_code == 1) {
							var thejson = JSON.parse(res.data.data)
							this.resumeList = this.resumeList.concat(thejson)
							console.log(this.resumeList)
						}
					},
					fail: (res) => {
						console.log('失败' + res)
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.image-banner{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.image-banner image{
	  width: 100%;
	  height: 100%;
	}
	.card {
		height: 100vh;

		scroll-view {
			width: 100%;
			height: calc(100% - 100rpx);
			padding: 0 28rpx;

			.list {
				width: 100%;
				height: 100%;

				.item {
					width:100%;
					height: 380rpx;
					margin-bottom: 28rpx;
				}
			}
		}
	}

	.card-swiper2 {
		height: 420rpx !important;
		overflow: hidden;
	}

	.card-swiper2 {
		width: 680rpx !important;
		left: 30rpx;
		box-sizing: border-box;
		overflow: initial;
		padding: 0 0rpx 40rpx 0;
	}

	.swiper-item1 {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(0.97);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		background-color: #E7FAFE;
	}

	.swiper-item1 {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 50%;
		transform: translate(510rpx, -160rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}

	.swiper-item2 {
		margin-top: -180rpx;
		width: 100%;
		transform: translate(510rpx, -150rpx) scale(0.9, 0.9);
		transition: all 0.3s ease 0s;
		will-change: transform;
	}

	.swiper-item-text {
		margin-top: -270rpx;
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 10rpx;
		transform: translate(30rpx, -20rpx) scale(0.8, 0.8);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	/* 底部tabbar假阴影 start*/
	.bg-tabbar-shadow {
		background-image: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.1) 10rpx, #FFFFFF, #FFFFFF);
		position: fixed;
		bottom: 0;
		height: 450rpx;
		width: 100vw;
		z-index: -1;
	}

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -20rpx) rotateX(20deg) rotateY(10deg) rotateZ(-20deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);


				}
			}
		}
	}
</style>